<script setup lang="ts">
import { h, onMounted, reactive, ref } from 'vue';
import { NButton, NImage, useDialog, useMessage } from 'naive-ui';
import { REQUEST } from '@/api/request';
import Search from './components/search.vue';
import Modal from './components/modal.vue';
const message = useMessage();
const dialog = useDialog();
defineOptions({
  name: 'Shopping'
});
const actionsArr: any = [
  {
    title: '查看',
    key: 'edit'
  }
];
const columns: any = ref([
  {
    title: '商品名称',
    key: 'name',
    minWidth: 100
  },
  {
    title: '图片',
    key: 'imgUrl',
    minWidth: 150,
    render(row: any) {
      return h(
        NImage,
        {
          width: 80,
          height: 80,
          style: 'margin-right:5px;',
          src: row.imgUrl
        },
        {
          default: () => row
        }
      );
    }
  },
  {
    title: '购买数量',
    key: 'orderNumber',
    minWidth: 150
  },
  {
    title: '未出库数量',
    key: 'undelivered',
    minWidth: 150
  },
  {
    title: '出库数量',
    key: 'outbound',
    minWidth: 150
  },

  {
    title: '操作',
    key: 'actions',
    align: 'center',
    minWidth: 150,
    render(row: any) {
      const buttonGroup = actionsArr.map((item: any) => {
        return h(
          NButton,
          {
            size: 'small',
            type: item.key == 'edit' ? 'primary' : 'error',
            style: {
              marginRight: '6px'
            },
            onClick: () => {
              if (item.key === 'edit') {
                // eslint-disable-next-line @typescript-eslint/no-use-before-define
                edit(row);
              } else {
                // eslint-disable-next-line @typescript-eslint/no-use-before-define
                del(row);
              }
            }
          },
          {
            default: () => item.title
          }
        );
      });

      return buttonGroup;
    }
  }
]);

const tableData: any = ref([]);
const loading: any = ref(false);
const queryForm: any = ref({});
const search = (datas: any) => {
  queryForm.value.startTime = datas[0];
  queryForm.value.endTime = datas[1];

  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getData();
};
onMounted(() => {
  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  getData();
});
const getData = () => {
  loading.value = true;
  REQUEST.POST('SHOPPINGCHUKULIST', {
    startTime: queryForm.value.startTime,
    endTime: queryForm.value.endTime
  }).then((res: any) => {
    loading.value = false;
    tableData.value = res.data;
  });
};
const showModal: any = ref(null);
const edit = (row: any) => {
  showModal.value.open(row);
};
const del = (row: any) => {
  dialog.warning({
    title: '警告',
    content: '确定删除当前数据吗？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      REQUEST.POST('SHOPDEL', {
        ids: [`${row.id}`]
      }).then((res: any) => {
        if (res.status == 200) {
          message.success('删除成功！');
          getData();
        }
      });
    },
    onNegativeClick: () => {
      message.error('取消');
    }
  });
};
</script>

<template>
  <NSpace vertical :size="16">
    <NCard :bordered="false" class="card-wrapper">
      <Search @search="search"></Search>
    </NCard>
    <NCard :bordered="false" class="card-wrapper">
      <NFlex justify="space-between">
        <h1 class="title">出库商品列表</h1>
      </NFlex>
      <NDataTable :loading="loading" :columns="columns" :remote="true" :data="tableData" :bordered="false" />
    </NCard>
    <Modal ref="showModal" @ok="getData"></Modal>
  </NSpace>
</template>

<style lang="scss" scoped>
.title {
  font-size: 18px;
  font-weight: bold;
}
</style>
